<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>

<script type="text/javascript">
$(function(){
	$("#pager").pager({ pagenumber: ${friendModel.currentPage}, 
		pagecount: ${friendModel.totalPage},
		buttonClickCallback: function(page){
			$("#content_detail").load("friend.htm?page="+page);
		} 
	});
	
	//弹出框取消删除好友按钮
	$("#delete_friend_cancel").click(function(){
		deleteFriendCancel();
	});
	
	
});

function friendVisitor(){
	$("#content_detail").load("friendVisitor.htm");
}

function friendDelete(family,avatar){
	$("#messageTitle").html('删除好友');
	$("#message1").html('断开你和他家之间的邻居关系，你也将不再出现在他家的邻居列表中，但系统不会发消息通知对方。');
	$("#message2").html('如果只是不想在你的邻居动态中,建议你使用"屏蔽邻居动态"功能。');
	$("#delete_friend_submit").attr("onclick","").unbind('click'); 
	$("#delete_friend_dialog_avatar").attr("src",avatar);
	$("#delete_friend_dialog").show();
	$("#delete_friend_submit").bind("click",function(){
		$("#content_detail").load("friendDelete.htm?friend="+family);
	});
	
}
function deleteFriendCancel(){
	$("#delete_friend_submit").unbind('click'); 
	$("#delete_friend_dialog").hide();
}
function changeGroup(group,page){
	$("#content_detail").load("friend.htm?page="+page+"&group="+group);
}

function addFriendGroup(index,type,friendId){
	
	$("#friend_add_group").css("top",(20+index*90 )+"px");
	if(type==1){
		$("#friend_add_group").attr("class","h_myfriends_box");
		$("#friend_add_group").css("right","110px");
	}else if(type==2){
		$("#friend_add_group").attr("class","h_myfriends_box2");
		$("#friend_add_group").css("right","20px");
	}
	$("#friend_add_group").load("friendGroup.htm?type="+type+"&index="+index+"&friendId="+friendId,function(){
		$("#friend_add_group").show();
	});
	
}

function selectGroup(obj,friendId,groupId,index){
	$.post("selectGroup.htm",{
		friendId:friendId,
		group:groupId
	},function(data){
		var groupNameObj = $("#friend_group_name"+index);
		groupNameObj.text($(obj).text());
		groupNameObj.attr("name","friend_group_name"+groupId);
		$("#friend_add_group").hide();
	});
}

function saveFriendGroup(groupNameInputId,index,friendId){
	if(IsNull($("#"+groupNameInputId).val())){
		alert("分组名称不能为空！");
		return ;
	}
	$.post("addFriendGroup.htm",{
		groupName:$("#"+groupNameInputId).val(),
		index:index,
		friendId:friendId
	},function(data){
		var groupNameObj = $("#friend_group_name"+index);
		groupNameObj.text(data.name);
		groupNameObj.attr("name","friend_group_name"+data.identifier);
		$("#friend_add_group").hide();
		$("#group_select").append("<option value='"+data.identifier+"'>"+data.name+"</option>");
	},'json');
}

function deleteFriendGroup(groupId,index,friendId){
	$.post("deleteFriendGroup.htm",{
		groupId:groupId,
		index:index,
		friendId:friendId
	},function(data){
		var groupNameList = $("div[name='friend_group_name"+groupId+"']");
		groupNameList.text("朋友");
		groupNameList.attr("name","friend_group_name");
	//	$("#friend_group_name"+index).text("朋友");
		$("#friend_add_group").hide();
		$("#group_select option[value="+groupId+"]").remove();
	});
}
function cancelShield(avatar,obj,friendId){
	$("#messageTitle").html('取消屏蔽邻居动态');
	$("#message1").html('取消屏蔽TA家的动态，TA家的动态将在你的邻居动态中显示。');
	$("#message2").html('如果需要屏蔽请点击“屏蔽邻居动态”');
	 $("#delete_friend_submit").attr("onclick","").unbind('click'); 
		$("#delete_friend_dialog_avatar").attr("src",avatar);
		$("#delete_friend_dialog").show();
		$("#delete_friend_submit").bind("click",function(){
			$.post("friendShield.htm",{
				shield:false,
				friendId:friendId
			},function(data){
				deleteFriendCancel();
				$(obj).text("屏蔽邻居动态");
				$(obj).attr('onclick','').unbind('click');
				$(obj).click(function(){
					shield(avatar,obj,friendId);
				});
			});
		});
}

function shield(avatar,obj,friendId){
	$("#messageTitle").html('屏蔽邻居动态');
	$("#message1").html('屏蔽TA家的动态，你将不在邻居动态中显示TA家的动态。');
	$("#message2").html('如果需要恢复请点击“取消屏蔽邻居动态”');
	$("#delete_friend_submit").attr("onclick","").unbind('click'); 
	$("#delete_friend_dialog_avatar").attr("src",avatar);
	$("#delete_friend_dialog").show();
	$("#delete_friend_submit").bind("click",function(){
		$.post("friendShield.htm",{
			shield:true,
			friendId:friendId
		},function(data){
			deleteFriendCancel();
			$(obj).text("取消屏蔽邻居动态");
			$(obj).attr('onclick','').unbind('click');
			$(obj).click(function(){
				cancelShield(avatar,obj,friendId);
			});
		});
	});
}
</script>

<div class="h_main2">
	<div class="h_data">
		<h2>
			我家的邻居
		</h2>
		<div class="h_newNews">
			<ul>
				<li id="newNews1" class="h_newNewsHover">
					<a>我家的邻居</a>
				</li>
				<li id="newNews2" onclick="friendVisitor();">
					<a>访问脚印</a>
				</li>
				<!-- 
					<span><a href="#">邀请朋友加入</a> </span>
					 -->
				<div class="clear"></div>
			</ul>
			<div class="clear"></div>
		</div>
		<div class="h_newNews_box">
			<div class="h_newNews_text" id="con_newNews_1"
				style="display: block;">
				<p class="fr pb10 pr15 pt10">
					<select id="group_select" name="group"
						onchange="changeGroup(this.value,${friendModel.currentPage});">
						<option value="">
							分组设置
						</option>
						<c:forEach items="${groupList}" var="friendGroup">
							<option value="${friendGroup.identifier}"
								<c:if test="${group==friendGroup.identifier}">
									SELECTED
								</c:if>>
								<c:out value="${friendGroup.name}" />
							</option>
						</c:forEach>

					</select>
				</p>
				<div class="clear"></div>
				<div class="h_myfriends_list" style="position: relative;">
					<c:choose>
						<c:when test="${friendModel.totalRecord <1}">
							您家现在还没有和其他家庭成为邻居哦，快来<a href="javascript:void(0);" onclick="setHash('#searchFriendFamily');">“查找邻居”</a>看看有没有熟人吧。
						</c:when>
						<c:otherwise>
							<ul>
								<c:forEach items="${friendModel.list}" var="friendFamily"
									varStatus="status">
									
									<li>
						              	<a href="javascript:void(0);"  onclick="seeOtherFamily('${friendFamily.doorplate}')"><img src="${friendFamily.avatar}" alt="头像" width="58" height="58"/></a>
						              	<div class="myfriends_pmBox">
						                    <em><a href="#" onclick="seeOtherFamily('${friendFamily.doorplate}')">
						                    	<c:out value="${friendFamily.nickname}" /></a><strong class="ml15">门牌：${friendFamily.doorplate} </strong></em>
						                    <div class="myfriends_pm">
						                      <c:forEach items="${friendFamily.fatherList}" var="father">
						                      	<p><img src="${father.avatar}" alt="头像" width="34" height="34" /><strong>爸爸：<c:out value="${father.friendName}" /></strong></p>
						                      </c:forEach>
						                      <c:forEach items="${friendFamily.motherList}" var="mother">
						                      	<p><img src="${mother.avatar}" alt="头像" width="34" height="34" />妈妈：<c:out value="${mother.friendName}" /></p>
						                      </c:forEach>
						                    </div>
						                </div>
						                <div class="myfriends_pmText">                
										<div class="h_myfriends_class fr">
						                  <div  class="h_myfriends" id="friend_group_name${status.index}"
												name="friend_group_name${friendFamily.group}"
												onclick="addFriendGroup(${status.index},1,'${friendFamily.friendId}')"><c:out value="${friendFamily.groupName}" />
						                  </div>
						                  <div class="ml10 h_myfriends2" onclick="addFriendGroup(${status.index},2,'${friendFamily.friendId}');">添加邻居分类
						                  </div>
						                </div>
						                    <div class="myfriends_BgBox"><a class="myfriends_Bg1"
												href="javascript:void(0);"
												<c:if test="${friendFamily.shield==true}">
														onclick="cancelShield('${friendFamily.avatar}',this,'${friendFamily.friendId}')"
												</c:if>
												<c:if test="${friendFamily.shield==false}">
													onclick="shield('${friendFamily.avatar}',this,'${friendFamily.friendId}')"
												</c:if>>
													<c:if test="${friendFamily.shield==true}">
														取消屏蔽邻居动态
													</c:if> <c:if test="${friendFamily.shield==false}">
														屏蔽邻居动态 
													</c:if> </a></div>
						                    <div class="myfriends_sc"><span><a href="javascript:void(0);"
												onclick="friendDelete('${friendFamily.doorplate}','${friendFamily.avatar}')">删除邻居</a></span></div>
						                </div>
						                <div class="clear"></div>
						            </li>
						          
								</c:forEach>
		
		
							</ul>
						</c:otherwise>
					</c:choose>
					
					<div class="clear"></div>

					<div class="h_myfriends_box2" style="display: none"
						id="friend_add_group">
						
					</div>
				</div>
				<div class="clear"></div>
				<c:if test="${friendModel.totalRecord > 0}">
					<div id="pager" class="h_page"></div>	
				</c:if>
				
			</div>
			<div class="h_newNews_text" id="con_newNews_2">
				fdsfsdf
			</div>
			<div class="h_newNews_text" id="con_newNews_3">
				fffff
			</div>
		</div>
	</div>
</div>

<div class="delete_friend" id="delete_friend_dialog"
	style="display: none;">
	<h4>
		<a href="javascript:void(0)" id="delete_friend_cancel"></a><span id="messageTitle">删除邻居</span>
	</h4>
	<div class="delete_friendText">
		<div class="newsList_img2">
			<div class="own_img">
				<img id="delete_friend_dialog_avatar" width="58" height="58"
					src="../images/home_images/img04.jpg" alt="我的邻居" />
			</div>

		</div>
		<p id="message1">
			断开你和他家之间的邻居关系，你也将不再出现在他家的邻居列表中，但系统不会发消息通知对方。
		</p>
		<p class="pt10" id="message2">
			如果只是不想在你的邻居动态中,建议你使用"屏蔽邻居动态"功能。
		</p>
	</div>
	<div class="delete_friendAn">
		<div class="h_button fr ml5" onclick="deleteFriendCancel();">
			<strong>取 消</strong>
		</div>
		<div class="h_button fr" id="delete_friend_submit">
			<strong>确 定</strong>
		</div>
		<div class="clear"></div>
	</div>
</div>

